<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Mirror</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0px;
            font-family: "微软雅黑 Light", "PingFang SC", "sans-serif";
            font-weight: lighter;
            overflow: hidden;
            font-size: 16px;
        }
        
        #app {
            width: 100%;
            height: 100%;
        }
        
        .top {
            color: #FFF;
            margin: 0px;
            height: 150px;
            width: 300px;
            position: fixed;
            top: 0px;
            overflow: hidden;
            text-shadow: rgba(66, 66, 66, 0.24) 0px 2px 2px, rgba(66, 66, 66, 0.12) 0px 0px 4px;
        }
        
        #left {
            width: 300px;
            height: calc(100% - 150px);
            margin-top: 150px;
            float: left;
            border-right: #EEEEEE;
            box-shadow: rgba(66, 66, 66, 0.24) 0px 2px 2px, rgba(66, 66, 66, 0.12) 0px 0px 4px;
            overflow: auto;
        }
        
        #left h1 {
            text-align: center;
            font-weight: normal;
            margin: 0px;
            line-height: 100px;
        }
        
        #left p {
            text-align: center;
            margin: 0px;
        }
        
        #right {
            width: calc(100% - 396px);
            height: 100%;
            overflow: auto;
            float: right;
            padding: 24px 48px;
        }
        
        #right>article:first-child {
            margin-bottom: 72px;
        }
        
        #nav a {
            display: block;
            width: 100%;
            padding: 16px 0px;
            text-align: center;
            color: #424242;
            text-decoration: none;
            transition: all 200ms ease-out;
        }
        
        #nav a:hover {
            background: #EEEEEE;
        }
        
        .router-link-active {
            color: #FFF !important;
            background: #00BCEA !important;
        }
        
        .class {
            text-align: left !important;
            color: #9E9E9E;
            padding: 24px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="default.css" />
    <script src="./highlight.js"></script>

</head>

<body>
    <div id="app">

        <div id="left">
            <div class="top" style="background: #424242;">
                <div style="background: url('https://unsplash.it/400/400/?random'); width: 100%; height: 100%; background-size: cover; opacity: 0.72;"></div>
            </div>
            <div class="top">
                <h1>Vue Mirror</h1>
                <p>An UI Framework based on Vue.js</p>
            </div>
            <div id="nav">
                <p class="class">Guide</p>

                <router-link to="/Home">
                    About
                </router-link>

                <p class="class">Components</p>

                <router-link to="/MButton">
                    MButton
                </router-link>
                <router-link to="/MRadio">
                    MRadio
                </router-link>
                <router-link to="/MCheckbox">
                    MCheckbox
                </router-link>
                <router-link to="/MForm">
                    MForm
                </router-link>

                <p class="class">Models</p>

                <router-link to="/MModal">
                    MModal
                </router-link>

                <router-link to="/MToast">
                    MToast
                </router-link>
            </div>
        </div>

        <div id="right">
            <router-view></router-view>
        </div>

    </div>
</body>

</html>